<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="foodName"
              placeholder="用款用途"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="getRecord()"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="success"
              @click="addition(1)"
              icon="el-icon-circle-plus-outline"
              >用款申请单</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div>
          <el-table
            :data="tableData"
            v-loading="loadFlag"
            border
            style="width: 100%"
          >
            <el-table-column prop="projectNumber" label="项目号" width="">
            </el-table-column>
            <el-table-column prop="date" label="申请日期" width="">
            </el-table-column>
            <el-table-column prop="purpose" label="用款用途"> </el-table-column>
            <el-table-column prop="mode" label="用款方式"> </el-table-column>
            <el-table-column prop="amount" label="用款金额"> </el-table-column>
            <el-table-column prop="departName" label="用款部门">
            </el-table-column>
            <el-table-column prop="contractNo" label="合同号">
            </el-table-column>
            <el-table-column prop="applicantName" label="申请人">
            </el-table-column>

            <el-table-column prop="payee" label="收款单位全称">
            </el-table-column>
            <el-table-column prop="address7" label="实例状态">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.flowState == 1"
                  >已付款</el-tag
                >
                <el-tag type="warning" v-if="scope.row.flowState == 0"
                  >进行中</el-tag
                >
                <el-tag type="danger" v-if="scope.row.flowState == 3"
                  >拒绝</el-tag
                >
              </template>
            </el-table-column>

            <el-table-column label="操作" width="220" align="center">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="text"
                  v-if="scope.row.flowState == 0"
                  @click="examine(scope.row, 3)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  @click="handleEdit(scope.row, 2)"
                  >查看</el-button
                >
                <el-button
                  type="text"
                  @click="editorPara(scope.row)"
                  v-if="scope.row.flowState == 1 || scope.row.flowState == 3"
                  >打印</el-button
                >
                <el-button type="text" @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagingClass">
            <el-pagination
              :page-sizes="m_page.sizes"
              :page-size="m_page.size"
              :current-page="m_page.number"
              @size-change="m_handleSizeChange"
              @current-change="m_handlePageChange"
              layout="total,sizes,prev, pager, next"
              background
              :total="m_page.totalElements"
            ></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="用款申请单"
      v-model="Sinnohsk"
      width="900px"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :inline="true" :model="money" label-width="80px">
        <el-form-item label="项目号">
          <el-input
            style="width: 260px"
            clearable
            v-model="money.knownNumber"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="subitem()"
          ></el-button>
        </el-form-item>
        <el-form-item label="申请日期">
          <el-date-picker
            style="width: 300px"
            v-model="money.weather"
            type="date"
            placeholder="选择日期"
            format="YYYY 年 MM 月 DD 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用款用途">
          <el-input style="width: 300px" v-model="money.currency"></el-input>
        </el-form-item>
        <el-form-item label="用款方式">
          <el-input style="width: 300px" v-model="money.railway"></el-input>
        </el-form-item>
        <el-form-item label="货币货种">
          <el-input style="width: 300px" v-model="money.volume"></el-input>
        </el-form-item>
        <el-form-item label="用款金额(小写)">
          <el-input
            style="width: 300px"
            v-model.numbe="money.make"
            @change="gotoCapAmountFn()"
          ></el-input>
        </el-form-item>
        <el-form-item label="(大写)">
          <el-input style="width: 300px" v-model="money.letter"></el-input>
        </el-form-item>
        <el-form-item label="用款部门">
          <el-cascader
            :show-all-levels="false"
            style="width: 300px"
            clearable
            v-model="money.superior"
            :options="department"
            :props="{ checkStrictly: true }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="合同号">
          <el-input style="width: 300px" v-model="money.contracts"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-select
            @change="peopleknew"
            v-model="money.applicant"
            style="width: 300px"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in subbuyer"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="部门负责人">
          <el-input style="width: 300px" v-model="money.rhead"></el-input>
        </el-form-item> -->
        <el-form-item label="收款单位全称">
          <el-input style="width: 300px" v-model="money.collections"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input style="width: 300px" v-model="money.paccount"></el-input>
        </el-form-item>
        <el-form-item label="开户银行">
          <el-input style="width: 300px" v-model="money.opened"></el-input>
        </el-form-item>
        <el-form-item label="" style="width: 300px"> </el-form-item>
        <el-form-item label="审批进度" style="width: 300px" v-if="under == 2">
          <div style="height: 300px; margin-left: 30px">
            <el-steps
              direction="vertical"
              :active="stripes"
              v-if="passive.length"
            >
              <el-step
                v-for="item in passive"
                :title="item.nodeName"
                :description="item.remarks"
                :key="item.id"
              ></el-step>
            </el-steps>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button @click="Sinnohsk = false">取 消</el-button>
          <el-button type="primary" v-if="under == 1" @click="determine()"
            >确 定</el-button
          >
          <el-button @click="hardware()" v-if="under == 2" type="primary"
            >编辑 确 定</el-button
          >
          <el-button type="success" @click="Disagree()" v-if="under == 3"
            >同意</el-button
          >
          <el-button type="danger" @click="RefuseSet()" v-if="under == 3"
            >拒绝</el-button
          >
        </div>
      </template>
    </el-dialog>
    <el-dialog
      title="选择项目编号"
      v-model="nserialnos"
      width="800px"
      :close-on-click-modal="false"
    >
      <getProject @wtc_serial="wtc_serial"></getProject>
    </el-dialog>
    <el-dialog
      title=""
      v-model="Printed"
      width="800px"
      :close-on-click-modal="false"
    >
      <println :payment="payment" @closeCalendar="canceloff"></println>
    </el-dialog>
    <el-dialog
      title="拒绝理由"
      v-model="getopt"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="refuse"
        maxlength="30"
        show-word-limit
      >
      </el-input>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button @click="getopt = false">取 消</el-button>
          <el-button type="primary" @click="newest()">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import getProject from "./myProject/getProject";
import println from "./myProject/println";
import nzhcn from "nzh/cn";
import dayjs from "dayjs";
export default {
  components: {
    getProject,
    println,
  },
  data() {
    return {
      Sinnohsk: false, //用款申请单弹框
      nserialnos: false,
      Printed: false,
      loadFlag: false, //加载flag
      getopt: false,
      refuse: "", //拒绝理由
      foodName: "",
      payment: {},
      money: {
        knownid: "",
        knownNumber: "",
        weather: "",
        currency: "",
        railway: "",
        volume: "",
        make: "",
        makeNumber: "",
        letter: "",
        superior: "",
        contracts: "",
        applicant: "",
        applicantchile: "",
        rhead: "",
        collections: "",
        paccount: "",
        opened: "",
      },
      passive: [],
      stripes: "", //审批进度
      editors: "", //部门ID
      superiorchin: "", //部门中文
      department: [],
      subbuyer: [], //人员
      under: 1,
      headerObj: "", //请求头
      tableData: [],
      m_page: {
        sizes: [10, 20, 40, 50, 100], //每页最大显示数
        size: 10,
        totalElements: 0,
        totalPages: 3,
        number: 1,
      },
      approvers: {
        approvalIds: "",
        approvalState: "",
        approvalers: "",
        createId: "",
        createTime: "",
        id: "",
        isEffective: "",
        nodeName: "",
        nodeType: "",
        pId: "",
        processdesigndetailsId: "",
        sort: "",
        tableName: "",
        updateTime: "",
      },
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    // this.headerObj["Authorization"] = `Bearer ${str}`;
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.Acquisition();
    this.production();
    this.getRecord();
  },
  methods: {
    canceloff(data) {
      this.Printed = data;
    },
    editorPara(row) {
      this.payment = row;
      console.log(this.payment);
      this.Printed = true;
    },
    //拒绝
    newest() {
      this.$axios
        .post(
          `api/serial/ApprovalHistory`,
          {
            pId: this.underID,
            nodeName: this.approvers.nodeName,
            tableName: this.approvers.tableName,
            nodeType: this.approvers.nodeType,
            approvalIds: this.approvers.approvalIds,
            isEffective: this.approvers.isEffective,
            processdesigndetailsId: this.approvers.processdesigndetailsId,
            approvalState: 3,
            approvalers: this.approvers.approvalers,
            sort: this.approvers.sort,
            id: this.approvers.id,
            remarks: this.refuse,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "拒绝",
            type: "success",
          });
          this.getRecord();
          this.Sinnohsk = false;
          this.getopt = false;
        });
    },
    //拒绝
    RefuseSet() {
      this.getopt = true;
    },
    //同意
    Disagree() {
      this.$axios
        .post(
          `api/serial/ApprovalHistory`,
          {
            pId: this.underID,
            nodeName: this.approvers.nodeName,
            tableName: this.approvers.tableName,
            nodeType: this.approvers.nodeType,
            approvalIds: this.approvers.approvalIds,
            isEffective: this.approvers.isEffective,
            processdesigndetailsId: this.approvers.processdesigndetailsId,
            approvalState: 1,
            approvalers: this.approvers.approvalers,
            sort: this.approvers.sort,
            id: this.approvers.id,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "同意",
            type: "success",
          });
          this.getRecord();
          this.Sinnohsk = false;
        });
    },
    //审核
    examine(row, index) {
      this.passive = [];
      this.Sinnohsk = true;
      this.under = index;
      this.underID = row.id;
      this.getProcess();
      this.deviceDetails();
    },
    handleEdit(row, index) {
      this.passive = [];
      this.Sinnohsk = true;
      this.under = index;
      this.underID = row.id;
      this.getProcess();
      this.deviceDetails();
    },
    deviceDetails() {
      this.$axios({
        methods: "GET",
        url: "api/serial/UseMoney",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: 10,
          pageIndex: 1,
          query: {
            id: this.underID,
          },
        },
      }).then((res) => {
        let mobile = res.data.data[0];
        this.money.knownid = mobile.projectId;
        this.money.knownNumber = mobile.projectNumber;
        this.money.weather = mobile.date;
        this.money.currency = mobile.purpose;
        this.money.railway = mobile.mode;
        this.money.volume = mobile.currencyGoods;
        this.money.make = mobile.amount;
        this.money.letter = mobile.amountRMB;
        this.editors = mobile.departId; //部门ID
        this.money.superior = mobile.departId; //部门ID
        this.superiorchin = mobile.departName; //部门ID
        this.money.contracts = mobile.contractNo;
        this.money.applicant = mobile.applicantId;
        this.money.applicantchile = mobile.applicantName;
        this.money.collections = mobile.payee;
        this.money.paccount = mobile.accountNumber;
        this.money.opened = mobile.bank;
      });
    },
    //获取流程
    getProcess() {
      this.$axios({
        methods: "GET",
        url: "api/serial/ApprovalHistory",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: 20,
          pageIndex: 1,
          query: {
            pId: this.underID,
            tableName: "usemoney",
          },
        },
      })
        .then((res) => {
          console.log(res);
          // this.ApprovalHistoryJson = res.data.data;
          // console.log(this.ApprovalHistoryJson);
          this.approvers = res.data.data[2];
          //   console.log(this.approvers);
          this.passive = res.data.data;

          let term = this.passive.reduce((count, item) => {
            console.log(item);
            if (item.approvalState == 1 || item.approvalState == 3) {
              return count + 1;
            }
            return count;
          }, 0);
          this.stripes = term;
        })
        .catch(() => {
          this.$message.error("获取失败");
        });
    },
    //删除
    handleDelete(row) {
      let into = row;
      console.log(into);
      this.$confirm("确认删除该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              `api/serial/UseMoney`,
              {
                id: into.id,
                isDelete: 1,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              // console.log(res);
              this.getRecord();
              this.$message.success("删除成功");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增
    determine() {
      this.$axios
        .post(
          `api/serial/UseMoney`,

          {
            projectId: this.money.knownid,
            projectNumber: this.money.knownNumber, //项目号
            date: dayjs(this.money.weather).format("YYYY-M-D"), //日期
            purpose: this.money.currency, //用款用途
            mode: this.money.railway, //用款方式
            currencyGoods: this.money.volume, //货币货种
            amount: this.money.make, //用款金额
            amountRMB: this.money.letter, //大写
            departId: this.editors, //部门ID
            departName: this.superiorchin, //部门
            contractNo: this.money.contracts, //合同号
            applicantId: this.money.applicant,
            applicantName: this.money.applicantchile, //申请人
            payee: this.money.collections, //收款单位全称
            accountNumber: this.money.paccount, //账号
            bank: this.money.opened, //开会银行
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.Sinnohsk = false;
          this.getRecord();
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },

    //获取数据
    getRecord() {
      this.loadFlag = true;
      this.$axios({
        methods: "GET",
        url: "api/serial/UseMoney",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,
          query: {
            purpose: this.foodName,
          },
        },
      }).then((res) => {
        ({ data: this.tableData, count: this.m_page.totalElements } = res.data);
        this.loadFlag = false;
      });
    },
    notEmpty() {
      this.money.knownid = "";
      this.money.knownNumber = ""; //项目号
      this.money.weather = "";
      this.money.currency = "";
      this.money.railway = "";
      this.money.volume = ""; //货币货种
      this.money.make = "";
      this.money.letter = "";
      this.editors = "";
      this.superiorchin = "";
      this.money.superior = ""; //部门
      this.money.contracts = ""; //合同号
      this.money.applicant = "";
      this.money.applicantchile = "";
      this.money.collections = "";
      this.money.paccount = "";
      this.money.opened = "";
    },
    addition(index) {
      this.notEmpty();
      this.under = index;
      this.Sinnohsk = true;
    },
    subitem() {
      this.nserialnos = true;
    },
    wtc_serial(data) {
      console.log(data);
      this.money.knownid = data.id;
      this.money.knownNumber = data.serialNumber;
      this.nserialnos = false;
    },

    gotoCapAmountFn() {
      let amount = nzhcn.encodeB(this.money.make, { outSymbol: false });
      this.money.make = Number(this.money.make);

      if (amount != "") {
        this.money.letter = amount + "元整";
      } else {
        this.money.letter = "";
      }
    },
    handleChange() {
      if (this.money.superior.length == 1) {
        this.editors = this.money.superior[0];
      } else if (this.money.superior.length == 2) {
        this.editors = this.money.superior[1];
      } else if (this.money.superior.length == 3) {
        this.editors = this.money.superior[2];
      }
      console.log(this.editors);
      this.department.forEach((item) => {
        console.log(item);
        if (item.children) {
          item.children.forEach((item1) => {
            if (this.editors == item1.value) {
              this.superiorchin = item1.label;
            }
          });
        }
      });
      // console.log(this.superiorchin);
    },
    peopleknew(value) {
      this.subbuyer.forEach((item) => {
        if (value == item.value) {
          // console.log(item);
          this.money.applicantchile = item.label;
        }
      });
      console.log(this.money.applicantchile);
    },
    //获取人员
    production() {
      this.$axios
        .get(`api/serial/Users?pageSize=${100}&pageIndex=${1}`, {
          headers: {
            Authorization: this.headerObj,
          },
        })
        .then((res) => {
          this.dateEnd = res.data.data;
          let fwork = [];
          this.dateEnd.forEach((item) => {
            fwork.push({
              departId: item.departId,
              value: item.id,
              label: item.name,
            });
          });
          // console.log(fwork);
          this.subbuyer = fwork;
        });
    },
    //获取上级部门
    Acquisition() {
      this.$axios
        .get(`api/serial/DepartmentTree`, {
          headers: {
            Authorization: this.headerObj,
          },
        })
        .then((res) => {
          // console.log(res);
          this.fication = res.data.data;
          // console.log(this.fication);
          let arr = [];
          this.fication.forEach((item, index) => {
            arr[index] = {
              value: item.id,
              label: item.departName,
            };

            if (item.departmentList.length) {
              arr[index].children = [];
              item.departmentList.forEach((item1, index1) => {
                arr[index].children[index1] = {
                  value: item1.id,
                  label: item1.departName,
                };
                arr[index].children[index1].children = [];
                if (item1.departmentList.length) {
                  item1.departmentList.forEach((item2, index2) => {
                    arr[index].children[index1].children[index2] = {
                      value: item2.id,
                      label: item2.departName,
                    };
                  });
                }
              });
            }
          });

          this.department = arr;
        });
    },
    //页码
    m_handlePageChange(currPage) {
      this.m_page.number = currPage;
      this.getRecord();
    },
    m_handleSizeChange(currSize) {
      this.m_page.size = currSize;
      this.getRecord();
    },
  },
};
</script>

<style scoped>
</style>